<template>
  <div>
    <div class="subPhoto">
      <span>学堂封面</span>
      <el-upload
        class="avatar-uploader"
        action="http://114.55.37.219:9090/files/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="checkMsg?.coverUrl != ''"
          :src="checkMsg.coverUrl"
          class="avatar"
        />
        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
    <div class="subVideo">
      <span>学堂视频</span>
      <el-upload
        class="avatar-uploader"
        action="http://114.55.37.219:9090/files/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <video v-if="checkMsg?.videoUrl != ''" controls width="250">
          <source :src="checkMsg.videoUrl" />
        </video>
        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="checkMsg"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="学堂分类">
        <el-radio-group v-model="checkMsg.name" @change="abcd">
          <el-radio
            v-for="(item, index) of classArr"
            :key="index"
            :label="item.name"
            >{{ item.name }}</el-radio
          >
          <!-- <el-radio label="婚姻法规">婚姻法规</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学堂开始时间" prop="createTime">
        <el-input
          type="datetime-local"
          v-model="checkMsg.createTime"
        ></el-input>
      </el-form-item>
      <el-form-item label="学堂标题" prop="title">
        <el-input type="text" v-model="checkMsg.title"></el-input>
      </el-form-item>
      <el-form-item label="活动内容" prop="content">
        <textarea
          name=""
          id=""
          cols="60"
          rows="10"
          v-model="checkMsg.content"
        ></textarea>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.prevent="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { adminInfo } from "@/store/admin.js";
import { changeStudy, getFenLei } from "@/require/index.js";
import { useRouter } from "vue-router";
const router = useRouter();
let store = adminInfo();
let checkMsg = ref({});
const formSize = ref("default");
checkMsg.value = store.classInfo;

// 分类
let classArr = ref([]);
let { data } = await getFenLei({
  name: "",
  pageNum: 1,
  pageSize: 100,
});
// console.log(data);
classArr.value = data.data.records;
console.log(classArr.value);
// 上传图片成功回掉
const handleAvatarSuccess = (value) => {
  checkMsg.value.coverUrl = value;
};
// 提交表单
const submitForm = async () => {
  delete checkMsg.value.createTime;
  let { data } = await changeStudy({
    ...checkMsg.value,
  });
  if (data.code == "200") {
    router.push({
      name: "classes",
    });
  }
};

// 查找对应的名字 的mid
const doId = (str) => {
  for (let i = 0; i < classArr.value.length; i++) {
    if (classArr.value[i].name == str) {
      return classArr.value[i].mid;
    }
  }
};
const abcd = (value) => {
  checkMsg.value.name = value;
  checkMsg.value.mid = doId(value);
  console.log(doId(value));
  console.log(checkMsg.value);
};
</script>
<style scoped lang="less">
.subPhoto {
  margin-left: 53px;
  display: flex;
  height: 50px;
  align-items: center;
  margin-bottom: 10px;
  span {
    font-size: 14px;
    color: #606266;
  }
  .avatar-uploader {
    height: 100%;
    line-height: 100%;
    img {
      width: 80px;
      margin-left: 20px;
    }
    .avatar-uploader-icon {
      font-size: 40px;
      margin-left: 30px;
    }
  }
}

.subVideo {
  margin-left: 53px;
  height: 180px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  span {
    font-size: 14px;
    color: #606266;
  }
  video {
    width: 200px;
    height: 100%;
    margin-left: 20px;
  }
  .avatar-uploader-icon {
    font-size: 40px;
    margin-left: 30px;
  }
}
</style>